<!--结算规则-->
<template>
  <div>
    <el-dialog
      title="结算规则详情"
      center
      :visible.sync="dialogVisible"
      @close="cancel"
      width="50%"
    >
      <el-form label-width="auto">
        <el-form-item label="产品名称：">{{ detail.productName }}</el-form-item>
        <el-form-item label="计件类型：">{{
          detail.pieceType == "ratio" ? "计件比例" : "计件定额"
        }}</el-form-item>
        <el-form-item label="结算方式：">{{
          detail.stlmtMethod == "1" ? "单节点结算" : "复合结算"
        }}</el-form-item>
        <el-form-item label="结算节点佣金："
          ><div v-html="settleMoney(detail)"></div
        ></el-form-item>
        <el-form-item label="审批时效：">{{
          detail.vertifyAging ? detail.vertifyAging : '-'
        }}</el-form-item>
        <el-form-item label="有效时间："
          >{{ detail.startTime }} 至 {{ detail.stopTime }}</el-form-item
        >
        <el-form-item label="结算规则：">
          {{ detail.stlmtRule ? detail.stlmtRule : "-" }}
        </el-form-item>
        <el-form-item label="数据方式：">{{
          detail.dataMode ? detail.dataMode : "-"
        }}</el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { settleMentDetailApi } from "../../../api/commission";

export default {
  data() {
    return {
      dialogVisible: false,
      detail: {}
    };
  },
  props: {
    show: {
      type: Boolean,
      default: () => false
    },
    detailInfo: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    show: {
      handler(val) {
        this.getInfo();
        this.dialogVisible = val;
      }
    }
  },
  methods: {
    getInfo() {
      settleMentDetailApi(this.detailInfo.stlmtRuleId).then(res => {
        if (res.code == 200) {
          this.detail = res.data;
        }
      });
    },
    settleMoney(row) {
      let node = {
        withdrawal: "提款结算",
        lenders: "放款结算",
        credit: "授信结算"
      };
      if (row.pieceType == "quota") {
        return (
          node[row.stlmtNode] +
          (row.stlmtAmount ? row.stlmtAmount + "元/单" : "")
        );
      }
      if (row.pieceType == "ratio" && row.stlmtMethod == "1") {
        return (
          node[row.stlmtNode] +
          (row.stlmtRatio ? row.stlmtRatio + "%(税后)" : "")
        );
      }
      if (row.pieceType == "ratio" && row.stlmtMethod == "2") {
        let str = "";
        row.stlmtNode.split(",").forEach(item => {
          if (item == "withdrawal") {
            str += `<div>${node["withdrawal"]}${row.withdrawalRatio}%(税后)</div>`;
          }
          if (item == "lenders") {
            str += `<div>${node["lenders"]}${row.lendersRatio}%(税后)</div>`;
          }
          if (item == "credit") {
            str += `<div>${node["credit"]}${row.creditRatio}%(税后)</div>`;
          }
        });
        // node[row.stlmtNode] + (row.stlmtRatio ? row.stlmtRatio+'%(税后)' : '')
        return str;
      }
    },
    cancel() {
      this.dialogVisible = false;
      this.$emit("cancel", false);
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__title,
/deep/ .el-form-item__label,
/deep/ .el-form-item__content {
  color: #222222;
  font-weight: 500;
}
/deep/ .el-dialog__body {
  padding-left: 60px;
  padding-right: 60px;
}
</style>
